<template>
    <div>
        <el-button type="primary" @click="goBack" class="top_back">返回</el-button>
        <div class="backgroud_color">
            <el-form ref="music" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="音乐名称" prop="title">
                    <el-input maxlength="30" v-model="form.title" />
                </el-form-item>
                <el-form-item label="歌手名称" prop="singer">
                    <el-input maxlength="30" v-model="form.singer" />
                </el-form-item>
                <el-form-item label="音乐封面" prop="image">
                    <el-upload :headers="headers" class="upload_image" :http-request="uploadImage"
                        :show-file-list="false">
                        <el-image :src="form.image" v-if="form.image" class="bannerImage" />
                        <el-icon :size="35" color="#a8abb2" v-else>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="音乐资源" prop="src">
                    <el-upload :headers="headers" class="upload_image" :http-request="uploadImage"
                        :show-file-list="false">
                        <audio controls :src="form.src" v-if="form.src"></audio>
                        <div v-else> 暂未上传</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="addMusicMessage">添加</el-button>
        </div>
    </div>
</template>

<script>
import { imageUpload, musicAddApi } from '@/api/index'
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                image: '',
                src: '',
                singer: '',
                title: ''
            },
            headers: {
                Authorization: localStorage.getItem("token"),
            },
            rules: {
                title: [
                    { required: true, message: "音乐名称不能为空", trigger: "blur" },
                ],
                singer: [
                    { required: true, message: "歌手名称不能为空", trigger: "blur" },
                ],
                image: [{ required: true, message: "音乐封面不能为空", trigger: "blur" }],
                src: [{ required: true, message: "歌曲资源不能为空", trigger: "blur" }],
            },
        }
    },
    mounted() {

    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        addMusicMessage() {
            musicAddApi(this.form).then(res => {
                console.log(res);
                if (res.data.code == 1) {
                    this.$message.success("添加成功")
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 1000);
                } else {
                    this.$message.error("添加失败")
                }
            })
        },
        //参数必须是param，才能获取到内容
        uploadImage(param) {
            // 获取上传的文件名
            var file = param.file;
            //发送请求的参数格式为FormData
            const formData = new FormData();
            formData.append("file", file);
            // 调用param中的钩子函数处理各种情况，这样就可以用在组件中用钩子了。也可以用res.code==200来进行判断处理各种情况
            imageUpload(formData, param)
                .then((res) => {
                    console.log(res, 'res');
                    if (res.data.code == 1) {
                        console.log(res);
                        if (res.data.data.type == 'video/mp4' || res.data.data.type == "audio/mpeg") {
                            this.form.src = res.data.data.path
                        } else {
                            this.form.image = res.data.data.path
                        }

                    }
                })
                .catch((err) => {
                    param.onError(err);
                });
        },
    },

}

</script>

<style lang="scss" scoped>
.bannerImage {
    width: 200px;
    height: 200px;
}

.backgroud_color {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 20px;
}
</style>